<template>
    <div style="padding-bottom: 10px; border:1px solid rgb(228, 228, 228); border-radius: 10px;">
      <el-header class="head">
        {{ compile == 1 ? "团课课程编辑":"团课课表编辑" }}
            <router-link :to="(compile == 1) ? '/GroupScheduleView' : '/LeagueClassView'">
  <el-button round>&lt; 返回</el-button>
</router-link>
            </el-header>
        <div class="content">
            <el-form ref="ruleForm" v-model="tableData" label-width="120px" class="demo-ruleForm">

                <el-form-item label="课程名称：" required>
                    <el-input v-model="tableData.name"></el-input>
                </el-form-item>

                <el-form-item label="课程图片：" required>
                    <div class="kechengbox">
                        <div class="">
                            <el-upload class="avatar-uploader" name="image">
                                <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>

                        </div>
                        <p class="Deleteimg">删除</p>
                    
                    </div>
                </el-form-item>

                <el-form-item  label="课程时长：" required>
                    <el-input v-model="tableData.time"></el-input>
                </el-form-item>

                <el-form-item label="最多上课人数：" required>
                    <el-input v-model="tableData.mastClassNum"></el-input>
                </el-form-item>

                <el-form-item label="场馆：" prop="coachId">
                    <el-select placeholder="请选择场馆">
                        <el-option></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="教练：" prop="coachId">
                    <el-select placeholder="请选择教练">
                        <el-option></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="课时费：" prop="price">
                    <el-input v-model="tableData.courseMoney"></el-input>
                </el-form-item>


                <el-form-item label="课程介绍" prop="description">
                    <el-input v-model="tableData.introduce" type="textarea"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="Revamp">提交</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import {ref} from "vue"
import { GroupHooks,Groups } from '../hooks/GroupHooks';
const _GroupHooks: Groups = GroupHooks()
const tableData=ref<Array<any>>([])
const route = useRoute()
const id=route.query.id //获取主页面传过来的id
_GroupHooks.getGroupCompile(id,compileList)
function compileList(data:any){  //回显数据
    tableData.value=data
    console.log(tableData.value)
}
function Revamp(){
    _GroupHooks.getCourseUpdateList(id,tableData.value)
}
      
</script>

<style scoped>
:deep(.tablel[data-v-4d12265a]){
    margin: 10px 20px 20px 20px;
}
:deep(.el-form-item) {
    margin-bottom: 20px;
}

:deep(.el-input__inner) {
    margin-top: 10px;
}

:deep(.el-textarea__inner) {
    width: 350px;
}

/* 课程图片 */
.kechengbox {
    width: 260px;
    height: 240px;
    border: 1px solid #E7E8E8;
    display: inline-block;
    position: relative;
}

.kechengbox {
    text-align: center;
}

.Deleteimg {
    cursor: pointer;
}

/* 上传 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.prompt {
    width: 500px;
    height: 30px;
    /* border: 1px solid red; */
    position: absolute;
    margin-left: 260px;
    margin-top: -25px;
    color: #8c939d;

}

element.style {
    width: 100px;
}

.content {
    width: 600px;
    margin: 0 auto;
}

/* 返回 */
.fanhui {
    float: right;
    width: 70px;
    margin-right: 40px;
}

.box {
    overflow: hidden;
}

.content {
    padding-top: 10px;
}
.head{
		height: 50px;
		background-color: rgb(228, 228, 228);
		display: flex;
		align-items: center;
		justify-content: space-between;
        border-radius: 10px 10px 0 0;
	}
</style>